<script>
import axios from "axios";
import pagePath from "@/components/PagePath.vue"
const BASE_URL = 'http://localhost:8081/book/'


export default {
  name: 'crud_insert',
  data() {
    return {
      book: {
        bookid: '',
        name: '',
        price: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],

      }
    }
  },
  methods: {
    submitForm(book) {
      let _this = this//这个是全局的
      this.$refs[book].validate((valid) => {
        if (valid) {
          console.log(this.book);
          axios.post(BASE_URL + 'add', this.book).then(resp => {
            if (resp.data) {
              _this.$alert('《' + _this.book.name + '》添加成功', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push(pagePath.crud_query_delete)

                }
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
}

</script>

<template>
  <div class="el_insert_root">
    <el-form ref="form" :model="book" label-width="80px" :rules="rules">

      <el-form-item label="编号" prop="bookid" :rules="[
          {required:true, message:'id不能为空'},
          {type:'number', message: 'id必须为数字'}
      ]">
        <!--        编号不能修改，只读     -->
        <el-input v-model.number="book.bookid" placeholder="请输入编号"/>
      </el-form-item>

      <el-form-item label="名称" prop="name">
        <el-input v-model="book.name" placeholder="请输入名称"/>
      </el-form-item>

      <el-form-item label="价格" prop="price" :rules="[
          {required:true, message:'价格不能为空'},
          {type:'number', message: '价格必须为数字'}
      ]">
        <el-input v-model.number="book.price" placeholder="请输入价格"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>

    </el-form>

  </div>

</template>

<style>
.el_insert_root {
  margin-left: 300px;
  margin-right: 300px;
  text-align: left;
  display: flex;
  justify-content: center;
}

</style>